<ul nz-menu [nzMode]="'horizontal'" class="nav">
    <li nz-menu-item class="" routerLink="/tables/full" [routerLinkActive]="['ant-menu-item-selected']" style="outline: none" >
        <a style="outline: none" >专业管理</a>
    </li>
    <li nz-menu-item routerLink="/tables/standard" [routerLinkActive]="['ant-menu-item-selected']" style="outline: none" >
        <a style="outline: none">教师管理</a>
    </li>
    <li nz-menu-item routerLink="/tables/student" [routerLinkActive]="['ant-menu-item-selected']" style="outline: none" >
        <a style="outline: none">学生管理</a>
    </li>
</ul>
<div style="padding:15px 0">
    <nz-input [nzPlaceHolder]="'请输入您要搜索的专业'" [(ngModel)]="_value" style="width: 300px;margin-right: 10px"></nz-input>
    <button nz-button [nzType]="'primary'" (click)="doSearch()">搜索</button>

    <button nz-button [nzType]="'primary'" style="float: right" (click)="addMajor()">+新增专业</button>
</div>
<nz-table #nzTable [nzAjaxData]="data" [(nzPageIndex)]="pi" [(nzPageSize)]="ps" [nzLoading]="loading" [nzTotal]='Total'
          (nzDataChange)="dataChange($event)"
          (nzPageIndexChange)="pageChange($event)">

    <thead nz-thead>
    <tr>
        <!--<th nz-th [nzCheckbox]="true">-->
        <!--<label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate"-->
        <!--(ngModelChange)="checkAll($event)"></label>-->
        <!--</th>-->
        <th nz-th><span>专业名称</span></th>
        <th nz-th><span>班级数量</span></th>
        <th nz-th><span>已加入学生数</span>
        </th>
        <th nz-th><span>已关联教师</span>
        </th>
        <th nz-th><span>操作</span></th>
    </tr>
    </thead>
    <tbody nz-tbody>
    <tr nz-tbody-tr *ngFor="let data of nzTable.data">
        <!--<td nz-td [nzCheckbox]="true">-->
        <!--<label nz-checkbox  [(ngModel)]="i.checked" (ngModelChange)="refreshStatus($event)">-->
        <!--</label>-->
        <!--</td>-->
        <td nz-td>{{data.major_name}}</td>
        <td nz-td><span (click)="showClassTotal(data)" style="cursor: pointer;color:#c00000">{{data.classTotal}}</span></td>
        <td nz-td><span (click)="showStuTotal(data)" style="cursor: pointer;color:#c00000">{{data.studentTotal}}</span></td>
        <td nz-td><span (click)="showTeaModal(data)" style="cursor: pointer;color:#c00000">{{data.teacherTotal}}</span></td>

        <td nz-td>
            <a (click)="edit(data)">修改</a>
            <span nz-table-divider></span>
            <a (click)="isDelTec(data)">删除</a>
        </td>
    </tr>
    </tbody>
</nz-table>


<nz-modal [nzWrapClassName]="'vertical-center-modal'" [nzFooter]="'true'" [nzVisible]="showNewMajor" [nzTitle]="'新建专业'"
          [nzConfirmLoading]="loading" [nzContent]="mojorContent"
          (nzOnCancel)="clearMajor()" (nzOnOk)="newMajor()" [nzStyle]="style" [nzOkText]="'确定'"
          [nzCancelText]="'取消'">
    <ng-template #mojorContent>
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td width="20%" align="right" height="50px">专业名称：</td>
                <td>
                    <nz-input [(ngModel)]="majorName" [nzPlaceHolder]="'专业名称'" style="width: 430px"></nz-input>
                </td>
            </tr>
            <tr>
                <td  colspan="2">
                    <ul *ngFor="let class of classArrList">
                        <li style="height: 50px;line-height: 50px;">
                            <span style="display: inline-block;width: 20%;text-align: right">班级名称：</span>
                            <nz-input [(ngModel)]="class.className" [nzPlaceHolder]="'班级名称'" style="width: 430px"></nz-input>
                        </li>
                        <li style="height: 50px;line-height: 50px;">
                            <span style="display: inline-block;width: 20%;text-align: right">班级人数：</span>
                            <nz-input [(ngModel)]="class.classTotal" [nzPlaceHolder]="'班级人数'" style="width: 430px"></nz-input>
                        </li>
                    </ul>
                </td>
            </tr>
            <tr>
                <td  height="50px">

                </td>
                <td>
                    <button nz-button [nzType]="'primary'" [nzShape]="'circle'" [nzSize]="'large'" style="margin-left:200px" (click)="addMajorClass()">
                        <span><i class="anticon anticon-plus"></i></span>
                    </button>
                </td>
            </tr>
        </table>
    </ng-template>
</nz-modal>
<nz-modal [nzWrapClassName]="'vertical-center-modal'" [nzFooter]="'true'" [nzVisible]="showEditClass" [nzTitle]="'查看班级'"
          [nzConfirmLoading]="loading" [nzContent]="mojorContent1"
          (nzOnCancel)="showEditClass=false" (nzOnOk)="showEditClass=false" [nzStyle]="style" [nzOkText]="'确定'"
          [nzCancelText]="'取消'">
    <ng-template #mojorContent1>
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td width="20%" align="right" height="50px">专业名称：</td>
                <td>
                    {{ majorName }}
                </td>
            </tr>
            <tr>
                <td width="20%" align="right" >班级列表：</td>
                <td>
                    <table class="classlist"  cellpadding="0" cellspacing="0" >
                        <tr>
                            <td width="180px">班级名称</td>
                            <td width="180px">班级人数</td>
                            <td width="140px">操作</td>
                        </tr>
                        <tr *ngFor="let list of classDataList;let i = index">
                            <td >
                                <span *ngIf="list.isChange">{{list.cla_name}}</span>
                                <nz-input style="width: 150px" *ngIf="!list.isChange" [(ngModel)]="list.cla_name" [nzPlaceHolder]="'输入班级名称'" ></nz-input>
                            </td>
                            <td>
                                <span *ngIf="list.isChange">{{ list.count}}</span>
                                <nz-input style="width: 150px" *ngIf="!list.isChange" [(ngModel)]="list.count" [nzPlaceHolder]="'输入班级人数'" ></nz-input>
                            </td>
                            <td>
                                <button *ngIf="list.isChange" (click)="list.isChange = false" nz-button [nzType]="'default'" [nzSize]="'small'" style="margin-right:10px;">
                                    <span>修改</span>
                                </button>
                                <button *ngIf="list.isChange" nz-button [nzType]="'default'" [nzSize]="'small'" >
                                    <nz-popconfirm [nzTitle]="'确定要删除这个任务吗？'" (nzOnConfirm)="removeClassData(list)" [nzOkText]="'确定'"
                                                   [nzCancelText]="'取消'">
                                        <a nz-popconfirm>删除</a>
                                    </nz-popconfirm>
                                </button>


                                <button *ngIf="!list.isChange" nz-button [nzType]="'default'" [nzSize]="'small'" style="margin-right:10px;" (click)="saveClassData(list)">
                                    <span>保存</span>
                                </button>
                                <button *ngIf="!list.isChange" (click)="cencalSaveClass(list,i)" nz-button [nzType]="'default'" [nzSize]="'small'" >
                                    <span>取消</span>
                                </button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td height="50px"></td>
                <td>
                    <button style="margin-left:220px;"  nz-button [nzType]="'primary'" (click)="addClassData()" >
                        <span>添加</span>
                    </button>
                </td>
            </tr>
        </table>
    </ng-template>
</nz-modal>
<nz-modal [nzWrapClassName]="'vertical-center-modal'" [nzFooter]="'true'" [nzVisible]="tecModal" [nzTitle]="'查看教师'"
          [nzConfirmLoading]="loading" [nzContent]="mojorContent2"
          (nzOnCancel)="closeTecModal()" (nzOnOk)="saveTeacherMajor()" [nzStyle]="style" [nzOkText]="'确定'"
          [nzCancelText]="'取消'">
    <ng-template #mojorContent2>
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td width="20%" align="right" height="50px">专业名称：</td>
                <td>
                    {{ majorName }}
                </td>
            </tr>
            <tr>
                <td align="right" height="50px">已关联老师：</td>
                <td>
                    <span *ngFor="let list of glTecList" style="padding:2px 5px;border:1px solid #ddd;margin-right:5px;cursor: default;margin-bottom: 10px;display: inline-block" >
                        {{ list }}
                    </span>
                </td>
            </tr>
            <tr>
                <td align="right" style="min-height: 50px">教师列表：</td>
                <td>
                    <ul style="border: 1px solid #ddd;max-height: 120px;overflow-y: auto;padding:10px;padding-bottom:0;width: 500px">
                        <li style="float:left;margin:0 20px 10px 10px" *ngFor="let tec of tecList">
                            <input type="checkbox"  id="{{'tid'+ tec.id }}"
                                   style="vertical-align: middle;margin-right: 5px;" (change)="tecChange($event,tec)" [checked]="tec.ischeck"/>
                            <label for="{{'tid'+ tec.id }}">{{tec.UserName}}</label>
                        </li>
                    </ul>
                </td>
            </tr>

        </table>
    </ng-template>
</nz-modal>
<nz-modal [nzWrapClassName]="'vertical-center-modal'" [nzFooter]="'true'" [nzVisible]="stuModal" [nzTitle]="'查看学生'"
          [nzConfirmLoading]="loading" [nzContent]="mojorContent4"
          (nzOnCancel)="stuModal=false" (nzOnOk)="stuModal=false" [nzStyle]="style" [nzOkText]="'确定'"
          [nzCancelText]="'取消'">
    <ng-template #mojorContent4>
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tr>
                <td width="20%" align="right" height="50px">选择班级：</td>
                <td>
                    <nz-select style="width: 120px;" [(ngModel)]="selectClass" nzPlaceHolder="选择班级" nzAllowClear (ngModelChange)="claChange($event)">
                        <nz-option
                            *ngFor="let option of classList"
                            [nzLabel]="option.cla_name"
                            [nzValue]="option.cla_name">
                        </nz-option>
                    </nz-select>
                </td>
            </tr>
            <tr>
                <td align="right" height="50px">已加入学生：</td>
                <td>
                    <ul style="border:1px solid #ddd;padding: 10px 10px;overflow: auto;max-height: 500px">
                       <li style="float: left;margin:10px;position: relative;" *ngFor="let stu of stuList">
                           <img src="{{ stu.ImagePath ? ip + stu.ImagePath :'./assets/img/defaultUser-img.jpg' }}" width="50" height="50" style="vertical-align: middle">
                           <div style="display: inline-block;height: 50px;vertical-align: middle;margin-left:8px;width: 100px" >
                               <p style="height: 25px;line-height: 25px;font-size: 14px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space:nowrap ">{{ stu.UserName }}</p>
                               <p style="height: 25px;line-height: 25px;font-size: 14px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space:nowrap">{{ stu.CreateTime.substr(0,10) }}</p>
                           </div>
                           <nz-popconfirm [nzTitle]="'确定要删除这个任务吗？'" (nzOnConfirm)="isDelStu(stu)"  [nzOkText]="'确定'"
                                          [nzCancelText]="'取消'"  [nzPlacement]="'right'"
                                          style="position: absolute;right: 0;top: 0;cursor: pointer">
                               <i nz-popconfirm class="anticon anticon-close" ></i>
                           </nz-popconfirm>
                       </li>
                    </ul>
                </td>
            </tr>
        </table>
    </ng-template>
</nz-modal>
<nz-modal [nzWrapClassName]="'vertical-center-modal'" [nzFooter]="'true'" [nzVisible]="isRemove" [nzTitle]="'提示'"
          [nzContent]="removeContent3" (nzOnCancel)="isRemove=false" (nzOnOk)="removeMajor()"
          [nzStyle]="style1" [nzOkText]="'确定'" [nzCancelText]="'取消'" >
    <ng-template #removeContent3>
        <p>是否删除 <b>{{ removeMajorName }}</b> 专业？</p>
    </ng-template>
</nz-modal>

